<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/pages/common.jsp" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>角色信息</title>
<script type="text/javascript">
$(function () {

    //1.初始化Table
    var oTable = new TableInit();
    oTable.Init();

    //2.初始化Button的点击事件
    var oButtonInit = new ButtonInit();
    oButtonInit.Init();
	//初始化提示框的位置：top-center，bottom-left，bottom-right
    toastr.options.positionClass = 'toast-top-center';
    $('#exampleModal').on('hide.bs.modal',function(){
    	$("#fm")[0].reset();
    	$('#fm').data('bootstrapValidator').resetForm(true);
    	//路径div显示
    	document.getElementById("hrefDiv").style.display="block";//显示
    });
    
    
  	//jQuery，既阻止默认行为又停止冒泡
    $("#ss").on('click',function(){
    	    return false;//当然 也阻止了事件本身
    });

});


var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $('#tb_departments').bootstrapTable({
            url: '${pageContext.request.contextPath }/Menu/list.do',         //请求后台的URL（*）
            showExport: false, //是否显示导出
            exportDataType: "basic", //basic', 'all', 'selected'.
            method: 'get',                      //请求方式（*）
            toolbar: '',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParamsDetailed,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 20, 30],     //可供选择的每页的行数（*）
            search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            showColumns: false,                  //是否显示所有的列
            showRefresh: false,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            uniqueId: "pcmid",                     //每一行的唯一标识，一般为主键列
            showToggle:false,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: true,                   //是否显示父子表
            columns: [{
                checkbox: true,
                visible: false
            }, {
            	field: 'mid',
                title: 'id',
                visible: false
            }, {
            	field: 'title',
                title: '标题',
            }, {
            	field: 'href',
                title: '路径',
                visible: false
            }, {
            	field: 'grade',
                title: '等级',
            }, {
            	field: 'pid',
                title: '父级id',
                visible: false
            /* }, {
            	field: 'type',
                title: '类型', */
            }, {
            	field: 'sort',
                title: '排序',
            }, {
            	field: 'grade',
                title: '操作',
                width:220,
                formatter:function(value,row,index){
                	if(row.grade < 3){
						return "<button type=\"button\" class=\"btn btn-default\" onclick=\"doAdd("+row.mid+")\">新增下一级</button>"
							  +"<button type=\"button\" class=\"btn btn-default\" onclick=\"doView("+row.mid+")\">修改</button>"
							  +"<button type=\"button\" class=\"btn btn-default\" onclick=\"doDelete("+row.mid+")\">删除</button>"
							;
					}else{
						return "";
					}
				}
            }],
          //无线循环取子表，直到子表里面没有记录
            onExpandRow: function (index, row, $Subdetail) {
            	oTableInit.InitSubTable(index, row, $Subdetail);
            }
        });
    };
  //初始化子表格(无线循环)
    oTableInit.InitSubTable = function (index, row, $detail) {
	    var flg = true
       	if(row.grade == 2){
       		flg = false
       	} 	
	  	var parentid = row.mid;
        var cur_table = $detail.html('<table></table>').find('table');
        $(cur_table).bootstrapTable({
        	url: '${pageContext.request.contextPath }/Menu/list.do',         //请求后台的URL（*）
            showExport: false, //是否显示导出
            queryParams: {pid:parentid },
            exportDataType: "basic", //basic', 'all', 'selected'.
            method: 'get',                      //请求方式（*）
            toolbar: '',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: //得到查询的参数
            oTableInit.queryParamsDetailed = function (params) {
                var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                	pageSize: params.limit,   //页面大小
                    page: params.offset/params.limit+1,  //页码
                    pid:parentid
                };
                return temp;
            },//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 20, 30],     //可供选择的每页的行数（*）
            search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            showColumns: false,                  //是否显示所有的列
            showRefresh: false,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            uniqueId: "pcmid",                     //每一行的唯一标识，一般为主键列
            showToggle:false,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: flg,                   //是否显示父子表
            columns: [{
                checkbox: true,
                visible: false
            }, {
            	field: 'rmid',
                title: 'id',
                visible: false
            }, {
            	field: 'mid',
                title: 'id',
                visible: false
            }, {
            	field: 'title',
                title: '标题',
            }, {
            	field: 'href',
                title: '路径',
            }, {
            	field: 'grade',
                title: '等级',
            }, {
            	field: 'pid',
                title: '父级id',
                visible: false
            /* }, {
            	field: 'type',
                title: '类型', */
            }, {
            	field: 'sort',
                title: '排序',
            }, {
            	field: 'grade',
                title: '操作',
                width:220,
                formatter:function(value,row,index){
					if(row.grade < 3){
						return "<button type=\"button\" class=\"btn btn-default\" onclick=\"doAdd("+row.mid+")\">新增下一级</button>"
							  +"<button type=\"button\" class=\"btn btn-default\" onclick=\"doView("+row.mid+")\">修改</button>"
							  +"<button type=\"button\" class=\"btn btn-default\" onclick=\"doDelete("+row.mid+")\">删除</button>"
							;
					}else if(row.grade == 3){
						return "<button type=\"button\" class=\"btn btn-default\" onclick=\"doView("+row.mid+")\">修改</button>"
							  +"<button type=\"button\" class=\"btn btn-default\" onclick=\"doDelete("+row.mid+")\">删除</button>"
							;
					}else{
						return "";
					}
				}
            }],
          	//无线循环取子表，直到子表里面没有记录
            onExpandRow: function (index, row, $Subdetail) {
            	oTableInit.InitSubTable(index, row, $Subdetail);
            }
        });
        
    };
  	//得到查询的参数
    oTableInit.queryParamsDetailed = function (params) {
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
        	pageSize: params.limit,   //页面大小
            page: params.offset/params.limit+1,  //页码
            grade:1, 
            title:$.trim($('#rnameTJ').val()), 
        };
        return temp;
    };
    return oTableInit;
};


var ButtonInit = function () {
    var oInit = new Object();
    var postdata = {};

    oInit.Init = function () {
        //初始化页面上面的按钮事件
    };

    return oInit;
};


function refresh(){
	setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
		var row=$('#tb_departments').bootstrapTable('getData');
		if(row.length == 0){
			window.location.reload();
		}
	},1000);
}

function doDelete(mid) {
	var ids=mid;
		
	//询问框
	Ewin.confirm({ message: "确认要删除选择的数据吗？" }).on(function (e) {
       if (!e) {
         return;
       } 
    	var url = "${pageContext.request.contextPath }/Menu/delete.do";
	    $.post(url, "ids="+ids, function(data) {
			if (data == 1) {
				toastr.success('删除成功');
				setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
					$('#tb_departments').bootstrapTable('refresh');
					refresh()
				},1000);
			} else if (data == 2) {
				toastr.warning('该信息已删除!');
				setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
					$('#tb_departments').bootstrapTable('refresh'); 
					refresh()
				},1000); 
			} else {
				toastr.error('删除失败');
				setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
					$('#tb_departments').bootstrapTable('refresh');
					refresh()
				},1000);
			}
		}); 
    }); 
}

function doAdd(mid) {
	$.ajax({
        type: "post",
        data: "mid="+mid,
        url: "${pageContext.request.contextPath }/Menu/queryAllByMution.do",
         dataType: 'JSON',
         async: false,
         success: function (row) {
        	 if (row.length == 1) {
        			$("#bt").html("新增菜单信息");
        			$("#mid").val("");
        			//$("#title1").val(row[0].title);
        			$("#title").val("");
        			$("#icon").val(row[0].icon);
        			$("#href").val("");
        			$("#grade").val(parseInt(row[0].grade)+1);
        			$("#pid").val(row[0].mid);
        			$("#type").val(row[0].type);
        			$("#sort").val("");
        			//给ztree赋值
        			$('#exampleModal').modal(open);
       		}else{
       			toastr.warning('该信息已删除!');
				setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
					$('#tb_departments').bootstrapTable('refresh'); 
					refresh()
				},1000);
       		}
         }
	});
}
function doAddYj() {
	$("#bt").html("新增菜单信息");
	$("#mid").val("");
	//$("#title1").val(row[0].title);
	$("#title").val("");
	$("#icon").val('fa-gears');
	$("#href").val("");
	$("#grade").val(1);
	$("#pid").val("");
	$("#type").val("菜单");
	$("#sort").val("");
	//路径div隐藏
	document.getElementById("hrefDiv").style.display="none";//隐藏
	//给ztree赋值
	$('#exampleModal').modal(open);
       		
}

function doView(mid) {
	$.ajax({
        type: "post",
        data: "mid="+mid,
        url: "${pageContext.request.contextPath }/Menu/queryAllByMution.do",
         dataType: 'JSON',
         async: false,
         success: function (row) {
        	 if (row.length == 1) {
        			$("#bt").html("修改菜单信息");
        			$("#mid").val(row[0].mid);
        			$("#title").val(row[0].title);
        			$("#icon").val(row[0].icon);
        			$("#href").val(row[0].href);
        			$("#grade").val(row[0].grade);
        			if(row[0].grade == 1){
        				//路径div隐藏
        				document.getElementById("hrefDiv").style.display="none";//隐藏
        			}
        			$("#pid").val(row[0].pid);
        			$("#type").val(row[0].type);
        			$("#sort").val(row[0].sort);
        			//给ztree赋值
        			$('#exampleModal').modal(open);
       		}else{
       			toastr.warning('该信息已删除!');
				setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
					$('#tb_departments').bootstrapTable('refresh'); 
					refresh()
				},1000);
       		}
         }
	});
}

function save() {
    var bootstrapValidator = $("#fm").data('bootstrapValidator');  
    //开启验证
    bootstrapValidator.validate();  
    if (bootstrapValidator.isValid()){
    	if (document.getElementById('mid').value=='') {
			var url = "${pageContext.request.contextPath }/Menu/insert.do";
			var title="新增";
    	} else {
			var url = "${pageContext.request.contextPath }/Menu/update.do";
			var title="修改";
    	}  
	    $.post(url, $("#fm").serialize(), function(data) {
			if (data > 0) {
				toastr.success(title+'成功');
				setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
					if (document.getElementById('mid').value=='') {
						$('#exampleModal').modal('hide');
						$('#tb_departments').bootstrapTable('refresh');  
						refresh();
					}else{
						window.location.reload();
					}
				},1000);
			} else {
				toastr.warning('该菜单已存在，不能重复新增');
			}
		});
    }else{
	    return;  
    } 
}
function seach() {
	$('#tb_departments').bootstrapTable('refresh'); 
}
</script>
</head>
<body>
	<div class="panel-body" style="padding-bottom:0px;">
        <div class="panel panel-default">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <form id="formSearch" class="form-horizontal">
                    <div class="form-group" style="margin-top:15px">
                        <label class="control-label col-sm-1" for="txt_search_departmentname">标题 </label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="rnameTJ">
                        </div>
                        <div class="col-sm-4" style="text-align:left;">
                            <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary" onclick="seach()">查询</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>       

		


        <div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-default" onclick="doAddYj()">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
        </div> 
        <table id="tb_departments"></table>
    </div>
    
      <div class="modal fade bs-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
   		<div class="modal-dialog  modal-lg" role="document">
    		<div class="modal-content">
      			<div class="modal-header">
        			<button type="button" class="close closefm" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        			<h4 class="modal-title" id="exampleModalLabel">
        				<span id="bt" style="font-size:13px"></span>
        			</h4>
      			</div>
      			<div class="modal-body">
	        		<form id="fm" class="form-horizontal" style="margin-right: 5%;">
	          			<div class="form-group">
				            <label class="col-sm-2 control-label">标题:</label>
				            <div class="col-sm-10"> 
		            			 <input type="hidden" id="mid" name="mid" >
		            			 <input type="hidden" id="icon" name="icon" >
		            			 <input type="hidden" id="grade" name="grade" >
		            			 <input type="hidden" id="pid" name="pid" >
		            			 <input type="hidden" id="type" name="type" >
					            <input type="text" class="form-control" id="title" name="title">
					            <span class="xing"></span>
	          				</div>
	          			</div>
	          			<div class="form-group" id="hrefDiv">
				            <label class="col-sm-2 control-label">路径:</label>
				            <div class="col-sm-10"> 
					            <input type="text" class="form-control" id="href" name="href">
	          				</div>
	          			</div>
	          			<div class="form-group">
				            <label class="col-sm-2 control-label">排序:</label>
				            <div class="col-sm-10"> 
					            <input type="text" class="form-control" id="sort" name="sort">
	          				</div>
	          			</div>
	        			<div class="modal-footer"> 
				   			<div class="col-sm-3 col-sm-offset-10"> 
						        <button type="button" class="btn btn-default closefm" data-dismiss="modal" >关闭</button>
						        <button type="submit"  name="submit"  class="btn btn-primary" onclick="save()">保存</button>
			      			</div>
			      		</div>
	        		</form>
	      		</div>
    		</div>
  		</div>
	</div>
	
	<script type="text/javascript">
	$(function() {
		var layerTips = parent.layer === undefined ? layui.layer : parent.layer
		$("#fm").bootstrapValidator({
			feedbackIcons : {
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			fields : {
				rname : {
					validators : {
						notEmpty : {
							message : '角色不能为空'
						},
						callback: {
                            message: '角色不能重复',
                            callback:function(value, validator){
                                var flg = false;
                                $.ajax({
                                    type:'post',
                                    data:'rname='+value,
                                    url:'${pageContext.request.contextPath}/Role/queryAllByMution.do',
					                dataType: 'JSON',
					                async: false,
                                    success:function (data) {
                                        if(data.length == 0){
                                            flg  = true;
                                        }else if(data.length == 1){
	                                        var ma = $.trim($('#rid').val());
	                                        if (ma == data[0].rid) {
	                                            flg  = true;
	                                        }else{
	                                        	flg = false;
	                                        }
                                        }else{
                                            flg = false;
                                        }

                                    }
                                });
                                return flg;
                            }
                        },
					}
				},

			},
		});
	});
	</script>
	
</body>
</html>